<template>
    <div>
        <!--面包屑导航区-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!--卡片视图-->
        <el-card v-if="type===1">
            <el-row :gutter="30">
                <el-col :span="8">
                    <!--搜索与添加区域-->
                    <el-input placeholder="请输入内容" v-model="queryInfo.key" clearable @clear="getOrderList">
                        <el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="value" placeholder="请选择状态">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible = true">搜索</el-button>
                </el-col>
            </el-row>
            <!--用户列表区-->
            <el-table :data="orders" border stripe>
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="订单号" prop="orderId" width="220px"></el-table-column>
                <el-table-column label="用户名" prop="buyerNick" width="220px"></el-table-column>
                <el-table-column label="总金额（元）" prop="actualPay" width="120px"></el-table-column>
                <el-table-column label="状态" prop="status" width="140px">
                    <template scope="scope">
                        <span v-if="scope.row.status===1" style="color:red;">未付款</span>
                        <span v-if="scope.row.status===2" style="color:green;">已付款</span>
                        <span v-if="scope.row.status===3" style="color:#007b80;">已发货</span>
                        <span v-if="scope.row.status===4" style="color:#35be00;">交易成功</span>
                        <span v-if="scope.row.status===5" style="color:#86898b;">交易关闭</span>
                        <span v-if="scope.row.status===6" style="color:#0ba94c;">已评价</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime" width="200px"></el-table-column>
                <!--                <el-table-column label="状态">
                                    <template slot-scope="scope">
                                        <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)"></el-switch>
                                    </template>
                                </el-table-column>-->
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="showOrder(scope.row.orderId)">订单详情</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                v-if="scope.row.status===1"
                                @click="cancelOrder(scope.row.orderId)">取消订单</el-button>
                        <el-button
                                size="mini"
                                type="success"
                                v-if="scope.row.status===2"
                                @click="goShip(scope.row.orderId)">订单发货</el-button>
                        <el-button
                                size="mini"
                                type="warning"
                                v-if="scope.row.status===3"
                                @click="handleViewLogistics(scope.$index, scope.row)">订单跟踪</el-button>
                        <el-tooltip effect="dark" content="删除订单" placement="top" :enterable="false">
                            <el-button type="danger" size="mini" icon="el-icon-error" @click="removeOrder(scope.row.orderId)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页区域-->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background align="center"
                           :current-page=pagination.pagenum :page-sizes="[5, 10, 20, 50]" :page-size=pagination.pagesize
                           layout="total, sizes, prev, pager, next, jumper" :total="pagination.totalPage">
            </el-pagination>
        </el-card>
        <!--详情-->
        <OrderDetails
                @showOrder="showOrder"
                :currentId="currentId"
                v-if="type===2"></OrderDetails>
        <!--订单发货-->
        <DeliverOrderList
                @goShip="goShip"
                :currentId="currentId"
                v-if="type===3"
        >
        </DeliverOrderList>
        <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
    </div>
</template>

<script>
    import OrderDetails from "./OrderDetails";
    import DeliverOrderList from "./DeliverOrderList";
    import LogisticsDialog from "./LogisticsDialog";
    export default {
        name: "Orders",
        components: {OrderDetails,LogisticsDialog,DeliverOrderList},
        data(){
            return{
                orders:[],
                pagination:{
                    pageNum:1,
                    pageSize:10,
                    totalPage:1000
                },
                queryInfo:{

                },
                type: 1,
                currentId:0,
                logisticsDialogVisible:false,
                options: [{
                    value: '1',
                    label: '未付款'
                }, {
                    value: '2',
                    label: '已付款'
                }, {
                    value: '3',
                    label: '已发货'
                }, {
                    value: '4',
                    label: '交易成功'
                }, {
                    value: '5',
                    label: '交易关闭'
                }, {
                    value: '6',
                    label: '已评价'
                }],
                value: ''
            }
        },
        methods:{
            handleViewLogistics(index, row){
                this.logisticsDialogVisible=true;
            },
            showOrder(id){
                if (this.type===1){
                    this.type = 2
                }else if (this.type===2) {
                    this.type = 1
                }
                this.currentId = id
            },
            goShip(id){
                if (this.type===1){
                    this.type = 3
                } else if (this.type===3) {
                    this.type = 1
                }
                this.currentId = id
            },
            //取消订单
            cancelOrder(id){
                this.$http.get("order/order/cancelOrder/"+id).then(()=>{
                    this.getOrderList()
                })
            },
            removeOrder(id){
                this.$http.get("order/order/deleteOrder/"+id).then((res)=>{
                    if (res.data.data === false){
                        this.$message.error("此订单不可删除！")
                    }
                    this.getOrderList()
                })
            },
            handleSizeChange(newSize) {
                //pagesize改变时触发，当pagesize发生改变的时候，我们应该
                //以最新的pagesize来请求数据并展示数据
                //   console.log(newSize)
                this.pagination.pageSize = newSize;
                //重新按照pagesize发送请求，请求最新的数据
                this.getOrderList();
            },
            handleCurrentChange(current) {
                //页码发生改变时触发当current发生改变的时候，我们应该
                //以最新的current页码来请求数据并展示数据
                //   console.log(current)
                this.pagination.pageNum = current;
                //重新按照pagenum发送请求，请求最新的数据
                this.getOrderList();
            },
            //初始化
            getOrderList(){
                this.$http.post("/order/order/getAllOrderList",{
                    page:this.pagination.pageNum,
                    rows:this.pagination.pageSize
                }).then(res=>{
                    this.orders = res.data.data.items
                    for (let i = 0; i < this.orders.length; i++) {
                        this.orders[i].actualPay = this.orders[i].actualPay/100
                    }
                    this.pagination.totalPage = res.data.data.total
                })
            }
        },
        mounted() {
            this.getOrderList()
        }
    }
</script>

<style scoped>

</style>